<template>
	<view class="container">
		<fu-navbar :isBack="false" title="东本四厂" bgColor="#ffffff" color="#000"></fu-navbar>
		<view class="swiper-box">
			<swiper class="swiper" :circular="true" :autoplay="true" interval="5000" duration="500"
				@change="swiperChange">
				<swiper-item>
					<image mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="notice flex align-center">
			<!-- <image src="../../../static/images/laba.png" mode="aspectFill" class="laba"></image>
			<view></view> -->
		</view>

		<view class="menu margin-tlf-24 flex">
			<view class="item flex" @click="toOther(item)" v-for="(item, index) in list" :key="index"
				v-if="item.name!='PAGE_HISTORY'">
				<view class="hot" v-if="item.name == 'PAGE_PENDING_ANNOUNCE' && hotNum.unreadMessages1 ">
					{{ hotNum.unreadMessages1 > 99 ? '99+' : hotNum.unreadMessages1 || 0 }}
				</view>
				<view class="hot" v-if="item.name == 'PAGE_ORDER_GRABBING' && hotNum.unreadMessages2 ">
					{{ hotNum.unreadMessages2 > 99 ? '99+' : hotNum.unreadMessages2 || 0 }}
				</view>
				<view class="hot" v-if="item.name == 'PAGE_DISPATCH' && hotNum.unreadMessages3 ">
					{{ hotNum.unreadMessages3 > 99 ? '99+' : hotNum.unreadMessages3 || 0 }}
				</view>
				<view class="hot" v-if="item.name == 'PAGE_ACCEPT_ASSIG' && hotNum.unreadMessages4 ">
					{{ hotNum.unreadMessages4 > 99 ? '99+' : hotNum.unreadMessages4 || 0 }}
				</view>
				<view class="hot" v-if="item.name == 'PAGE_ACCEPT' && hotNum.unreadMessages5 ">
					{{ hotNum.unreadMessages5 > 99 ? '99+' : hotNum.unreadMessages5 || 0 }}
				</view>
				<view class="hot" v-if="item.name == 'PAGE_I_HANDLE' && hotNum.unreadMessages6 ">
					{{ hotNum.unreadMessages6 > 99 ? '99+' : hotNum.unreadMessages6 || 0 }}
				</view>

				<image src="../../../static/images/icon1.png" mode="aspectFill" class="icon"
					v-if="item.name == 'PAGE_PENDING_ANNOUNCE'"></image>
				<image src="../../../static/images/icon2.png" mode="aspectFill" class="icon"
					v-if="item.name == 'PAGE_ORDER_GRABBING'"></image>
				<image src="../../../static/images/icon3.png" mode="aspectFill" class="icon"
					v-if="item.name == 'PAGE_DISPATCH'"></image>
				<image src="../../../static/images/icon4.png" mode="aspectFill" class="icon"
					v-if="item.name == 'PAGE_ACCEPT_ASSIG'"></image>
				<image src="../../../static/images/icon5.png" mode="aspectFill" class="icon"
					v-if="item.name == 'PAGE_ACCEPT'"></image>
				<image src="../../../static/images/icon6.png" mode="aspectFill" class="icon"
					v-if="item.name == 'PAGE_I_HANDLE'"></image>
				<view>{{item.title}}</view>
			</view>
		</view>
		<!-- 工单管理 -->
		<view class="box margin-tlf-24">
			<view class="title">工单管理</view>
			<view class="list">
				<view class="item" @click="navTo('/pages/service/repair/index')">
					<image src="../../../static/images/icon13.png" mode="aspectFill" class="icon"></image>
					<text>扫描报修</text>
				</view>
				<view class="item" @click="navTo(`/pages/service/history/index`)">
					<image src="../../../static/images/icon14.png" mode="aspectFill" class="icon"></image>
					<text>维修记录</text>
				</view>
				<view class="item" @click="navTo('/pages/maintenance/record/index')">
					<image src="../../../static/images/icon16.png" mode="aspectFill" class="icon"></image>
					<text>维保记录</text>
				</view>
				<view class="item" @click="navTo('/pages/inspection/records/index')">
					<image src="../../../static/images/icon12.png" mode="aspectFill" class="icon"></image>
					<text>巡检记录</text>
				</view>
			</view>
		</view>

		<!-- 巡检点 -->
		<!-- <view class="box margin-tlf-24">
			<view class="title">巡检点</view>
			<view class="list">
				<view class="item" @click="navTo('/pages/inspection/add-plan/index')">
					<image src="../../../static/images/icon11.png" mode="aspectFill" class="icon"></image>
					<text>创建计划</text>
				</view>
				<view class="item" @click="navTo('/pages/inspection/records/index')">
					<image src="../../../static/images/icon12.png" mode="aspectFill" class="icon"></image>
					<text>点检记录</text>
				</view>
			</view>
		</view> -->

		<!-- 报修/维修 -->
		<!-- <view class="box margin-tlf-24">
			<view class="title">报修/维修</view>
			<view class="list">
				<view class="item" @click="navTo('/pages/service/repair/index')">
					<image src="../../../static/images/icon13.png" mode="aspectFill" class="icon"></image>
					<text>扫描报修</text>
				</view>
				<view class="item" @click="navTo(`/pages/service/history/index`)">
					<image src="../../../static/images/icon14.png" mode="aspectFill" class="icon"></image>
					<text>维修历史</text>
				</view>
			</view>
		</view> -->

		<!-- 维保任务 -->
		<!-- <view class="box margin-tlf-24">
			<view class="title">维保任务</view>
			<view class="list">
				<view class="item" @click="navTo('/pages/maintenance/add-main/index')">
					<image src="../../../static/images/icon15.png" mode="aspectFill" class="icon"></image>
					<text>创建维保</text>
				</view>
				<view class="item" @click="navTo('/pages/maintenance/record/index')">
					<image src="../../../static/images/icon16.png" mode="aspectFill" class="icon"></image>
					<text>维保记录</text>
				</view>
			</view>
		</view> -->

		<!-- 仓库管理 -->
		<view class="box margin-tlf-24" style="margin-bottom: 80px;">
			<view class="title">仓库管理</view>
			<view class="list">
				<view class="item" @click="navTo(`/pages/spare-parts/out-apply/index`)">
					<image src="../../../static/images/icon35.png" mode="aspectFill" class="icon"></image>
					<text>备件申请</text>
				</view>
				<!-- <view class="item" @click="navTo(`/pages/spare-parts/auditing/index`)">
					<image src="../../../static/images/icon42.png" mode="aspectFill" class="icon"></image>
					<text>备件审核</text>
				</view> -->
				<view class="item" @click="navTo(`/pages/spare-parts/spare-record/index`)">
					<image src="../../../static/images/icon37.png" mode="aspectFill" class="icon"></image>
					<text>出入库记录</text>
				</view>
				<!-- <view class="item" @click="navTo(`/pages/spare-parts/inStorage/index`)">
					<image src="../../../static/images/icon36.png" mode="aspectFill" class="icon"></image>
					<text>备件入库</text>
				</view> -->
			</view>
		</view>


		<u-fab horizontal="right" :pattern="pattern" @fabClick="fabClick" />

		<u-tabbar :curPage="0"></u-tabbar>
	</view>
</template>

<script>
	import fuNavbar from '@/components/fu-navbar/fu-navbar.vue';
	import scanIcon from '@/static/images/icon13.png'

	export default {
		components: {
			fuNavbar
		},
		data() {
			return {
				list: [],
				hotNum: {},
				testId:'',
				pattern: {
					icon: scanIcon
				},
			}
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo;
			}
		},
		onShow() {
			this.$api.post(global.apiUrls.selectUnreadMessages, {}).then(res => {
				if (res.data.code == 9100) {
					this.hotNum = res.data.info
				}
			})
		},
		onLoad() {
			if (this.userInfo) {
				this.list = this.userInfo.directory
			}
			if (!global.token) {
				uni.reLaunch({
					url: '/pages/login/index'
				})
			}
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
		},
		methods: {
			swiperChange() {

			},
			toOther(e) {
				this.$store.commit('updateTabDynamics', e.children);
				let state = e.name == 'PAGE_PENDING_ANNOUNCE' ? 2 : e.name == 'PAGE_ORDER_GRABBING' ? 3 : e.name ==
					'PAGE_DISPATCH' ? 4 : e.name == 'PAGE_ACCEPT_ASSIG' ? 9 : e.name == 'PAGE_ACCEPT' ? 10 : e.name ==
					'PAGE_I_HANDLE' ? 6 : 11
				uni.navigateTo({
					url: `/pages/service/order/index?title=${e.title}&state=${state}`
				})
			},
			fabClick() {
				uni.navigateTo({
					url: '/pages/equipment/scanCode/index?type=rep'
				})
				// uni.navigateTo({
				// 	url: `/pages/equipment/ledger/index?id=${60}`
				// })
			},
			
			navTo(path) {
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f3f5f8;
		min-height: 100vh;
		padding-bottom: 24rpx;
	}

	.swiper-box {
		padding: 0 24rpx;
		height: 280rpx;
		background-color: #fff;

		.swiper {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
				background-color: #eee;
			}
		}
	}

	.notice {
		background-color: #fff;
		padding: 12rpx 24rpx;

		.laba {
			width: 30rpx;
			height: 30rpx;
			margin-right: 12rpx;
		}

		view {
			color: #e39d39;
			font-size: 28rpx;
		}
	}

	.menu {
		background-color: #fff;
		border-radius: 24rpx;
		flex-wrap: wrap;
		padding: 24rpx 12rpx;

		.item {
			width: 25%;
			flex-direction: column;
			align-items: center;
			flex-shrink: 0;
			padding: 18rpx 0;
			font-size: 28rpx;
			position: relative;

			.hot {
				position: absolute;
				right: 15rpx;
				top: 8rpx;
				border-radius: 50%;
				min-width: 35rpx;
				padding: 5rpx;
				color: #fff;
				z-index: 5;
				text-align: center;
				background-color: orangered;
				font-size: 24rpx;
			}

			.icon {
				width: 102rpx;
				height: 102rpx;
				margin-bottom: 24rpx;
			}
		}
	}

	.box {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 0 8rpx;

		.title {
			font-weight: bold;
			font-size: 32rpx;
			padding: 24rpx 32rpx 16rpx;
		}

		.list {
			display: flex;
			flex-wrap: wrap;

			.item {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				flex-shrink: 0;
				padding: 20rpx 0;

				.icon {
					width: 82rpx;
					height: 82rpx;
					margin-bottom: 18rpx;
				}

				text {
					font-size: 28rpx;
				}
			}
		}
	}

	.margin-tlf-24 {
		margin: 24rpx 24rpx 0;
	}
</style>